<template>
  <!-- 新增 赠券方案配置 组件 -->
  <zm-dialog
    :title="pTitle"
    :visible.sync="value"
    append-to-body
    :before-close="dialogClose"
    :close-on-click-modal="false"
    custom-width="1200px"
  >
    <el-form
      class="el_form"
      :model="form"
      ref="formRef"
      :rules="formRules"
      label-width="140px"
      label-position="right"
    >
      <el-form-item label="方案名称：" prop="name">
        <zm-input
          v-model="form.name"
          placeholder="请输入方案名称"
          class="w300"
        />
      </el-form-item>
      <!-- 有效期 -->
      <div class="df">
        <el-form-item label="有效期：" prop="timeType">
          <zm-data-radio
            v-model="form.timeType"
            :list="timeType"
            label-name="name"
            class="w300"
          ></zm-data-radio>
        </el-form-item>
        <!-- 当 指定时间 时 开始时间/结束时间 -->
        <el-form-item
          label-width="0"
          prop="startTime"
          v-if="form.timeType.toString() === '2'"
        >
          <zm-date-picker
            class="w200"
            v-model="form.startTime"
            type="date"
            placeholder="开始日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </zm-date-picker>
        </el-form-item>
        <el-form-item
          label-width="0"
           prop="endTime"
          v-if="form.timeType.toString() === '2'"
        >
          <zm-date-picker
            class="w200 ml10"
            v-model="form.endTime"
            type="date"
            placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </zm-date-picker>
        </el-form-item>
      </div>

      <el-form-item label="方案类型：" prop="type" class="typeRadio">
        <zm-data-radio
          v-model="form.type"
          :list="typeList"
          label-name="name"
          class="w300"
          @change="returnedTypeChange"
        >
        <template slot-scope="item">
          <span class="mr5">{{item.name}}</span>
          <tip :content="item.DescriptionInformation"></tip>
        </template>
        </zm-data-radio>
      </el-form-item>
      <!-- 支付类型 会员支付，会员购票时才有-->
      <el-form-item
        label="支付类型："
        prop="payType"
        v-if="form.type.toString() !== '1'"
      >
        <span>订单满足支付方式为
          <zm-data-select
            v-model="form.payType"
            :list="payType"
            class="w200"
          ></zm-data-select>
          赠送
        </span>
      </el-form-item>
      <el-form-item label="触发场景：" prop="scene">
        <zm-data-radio
          v-model="form.scene"
          :list="sceneType"
          label-name="name"
          class="w300"
        ></zm-data-radio>
      </el-form-item>
      <el-form-item label="使用产品：" prop="productType">
        <zm-checkbox-group v-model="form.productType">
          <el-checkbox label="1">
            <template>
              电影
              <tip content="用户在电影渠道上可获得优惠卡券"></tip>
            </template>
          </el-checkbox>
          <el-checkbox label="2">
            <template>
              心选
              <tip content="用户在心选上可获得优惠券卡券"></tip>
            </template>
          </el-checkbox>
        </zm-checkbox-group>
      </el-form-item>
      <el-form-item label="领取方式：" prop="receiveType">
        <zm-data-radio
          v-model="form.receiveType"
          :list="receiveType"
          label-name="name"
          class="w300"
        >
         <template slot-scope="item">
          <span>{{item.name}}</span>
          <tip :content="item.DescriptionInformation"></tip>
        </template>
        </zm-data-radio>
      </el-form-item>
      <!-- 赠送卡券 表格 -->
      <el-form-item label="赠送卡券：" prop="relation">
        <zm-button t="add" @click="addSaleOrder">添加销售单</zm-button>
        <zm-table-data
          :data="form.relation"
          :columns="saleOrderColumns"
          :table-params="tableParams"
          :show-page="false"
        >
        </zm-table-data>
      </el-form-item>
      <!-- 退货处理 会员支付，会员购票时才有-->
      <el-form-item
        label="退货处理："
        prop="refundType"
        v-if="form.type.toString() !== '1'"
      >
        <span>若用户产生退货退款,{{
            form.type.toString() === "2" ? "赠送的" : ""
          }}卡券
          <zm-data-select
            v-model="form.refundType"
            :list="refundType"
            class="w200"
          ></zm-data-select>
        </span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="tr">
      <el-button size="small" @click="dialogClose">取消</el-button>
      <zm-button size="small" type="primary" @click="submit('formRef')">
        确定
      </zm-button>
    </div>
  </zm-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'
import tableMixin from '@/mixins/zmTableMixin'
import Tip from '@/components/Tip'
import {
  typeList,
  timeType,
  payType,
  receiveType,
  refundType,
  saleOrderColumns
} from '../const'
import {
  saleOrderVerify,
  createOrUpdate,
  getProgramDetail,
  getProgramSendInfo
} from '@/api/src/sendCouponSet'
export default {
  components: {Tip},
  mixins: [dialogMixin, tableMixin],
  props: {
    isApprove: {
      type: String,
      default: '0'
    },
    obj: {
      type: Object,
      default: {}
    },
    props: {
      type: Object,
      default () {
        return {
          label: 'name',
          value: 'id',
          children: 'accountData'
        }
      }
    }
  },
  data () {
    return {
      typeList,
      timeType,
      payType,
      receiveType,
      refundType,
      form: {
        name: '',
        timeType: '1',
        startTime: '',
        endTime: '',
        type: '1',
        scene: '1',
        productType: '1,2',
        receiveType: '2',
        refundType: '',
        relation: [],
        payType: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
        timeType: [
          { required: true, message: '请选择有效期类型', trigger: 'change' }
        ],
        startTime: [
          {
            required: true,
            message: '请选择开始时间',
            trigger: 'change'
          }
        ],
        endTime: [
          {
            required: true,
            message: '请选择结束时间',
            trigger: 'change'
          }
        ],
        type: [
          { required: true, message: '请选择方案类型', trigger: 'change' }
        ],
        payType: [
          { required: true, message: '请选择支付类型', trigger: 'change' }
        ],
        scene: [
          { required: true, message: '请选择触发场景', trigger: 'change' }
        ],
        productType: [
          {
            required: true,
            message: '请至少选择一个使用产品类型',
            trigger: 'change'
          }
        ],
        receiveType: [
          { required: true, message: '请选择领取方式', trigger: 'change' }
        ],
        relation: [
          { required: true, message: '请至少添加一条销售单', trigger: 'change' }
        ],
        refundType: [
          { required: true, message: '请选择退货处理类型', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    pTitle () {
      return this.obj.id ? '编辑' : '新增'
    },
    saleOrderColumns () {
      return saleOrderColumns(this)
    },
    sceneType () {
      if (this.form.type.toString() === '1') {
        return [{ name: '绑定卡券时赠送', value: '1' }]
      } else if (this.form.type.toString() === '2') {
        return [{ name: '成功支付订单后', value: '2' }]
      } else if (this.form.type.toString() === '3') {
        return [{ name: '成功支付影票订单', value: '3' }]
      } else return []
    }
  },
  created () {
    this.init()
    if (this.obj.id) {
      this.getInfo()
    }
  },
  methods: {
    init () {},
    async getInfo () {
      this.form = await getProgramDetail({ id: this.obj.id })
      this.$nextTick(async () => {
        const _relation = await getProgramSendInfo({ id: this.obj.id })
        this.$set(this.form, 'relation', _relation.list)
      })
    },
    addSaleOrder () {
      let data = {
        orderNo: '',
        saleOrderPwd: '',
        limitPersonNum: '',
        receiveNum: '',
        propsTypeDes: '',
        updateTime: '',
        status: '2',
        statusDesc: '未验证'
      }
      this.form.relation.push(data)
    },
    returnedTypeChange () {
      // 重新渲染销售单
      this.form.scene = this.form.type
      // this.$refs.formRef.clearValidate()
    },
    async onValid (row) {
      try {
        const _res = await saleOrderVerify({
          orderNo: row.orderNo,
          secretNo: row.saleOrderPwd,
          type: '1'
        })
        row.propsTypeDes = _res.propsTypeDes
        row.expiredName = _res.expiredName
        row.status = '1'
        row.statusDesc = '已验证'
        this.$message.success('验证通过!')
      } catch (err) {
        console.log(err.content)
      }
    },
    onDel (row, index) {
      this.form.relation.splice(index, 1)
    },
    submit (formRef) {
      this.$refs[formRef].validate(async valid => {
        if (valid) {
          if (this.obj.id) {
            await createOrUpdate({...this.form, id: this.obj.id})
          } else {
            await createOrUpdate(this.form)
          }
          this.$message.success(`${this.pTitle}送券方案成功!`)
          this.$emit('refresh')
          this.dialogClose()
        } else {
          this.$message.error(`${this.pTitle}送券方案失败!`)
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el_form::v-deep .el-form-item__error {
  padding: 0;
}
.typeRadio::v-deep {
  .el-radio {
    margin-bottom: 15px;
    vertical-align: top;
  }
  .el-radio:first-child {
    margin-top: 10px;
  }
}
.tip-style {
  .el-icon-question {
    font-size: 14px;
  }
}
</style>
